<!-- 这个文件用来测试10.5日的前端安全配置 从第一行到132行代码是用来测试的，但是没有测试成功-->
<!-- src/views/TestSecurity.vue -->
<template>
  <div class="test-security">
    <h2>安全配置测试页面</h2>
    
    <div class="test-section">
      <h3>1. 加密解密测试</h3>
      <button @click="testEncryption" class="test-btn">
        测试加密功能
      </button>
      <div v-if="encryptResult" class="result">
        <p>原始数据: {{ testData }}</p>
        <p>加密结果: {{ encryptResult.encrypted }}</p>
        <p>解密结果: {{ encryptResult.decrypted }}</p>
      </div>
    </div>

    <div class="test-section">
      <h3>2. 请求测试</h3>
      <button @click="testRequest" class="test-btn">
        测试请求功能
      </button>
      <div v-if="requestResult" class="result">
        <p>请求结果: {{ requestResult }}</p>
      </div>
    </div>

    <div class="test-section">
      <h3>3. 环境变量测试</h3>
      <button @click="testEnv" class="test-btn">
        测试环境变量
      </button>
      <div v-if="envResult" class="result">
        <p>API地址: {{ envResult.apiUrl }}</p>
        <p>加密密钥: {{ envResult.encryptKey }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestSecurity',
  data() {
    return {
      testData: {
        phone: '13800138000',
        address: '3号楼301宿舍',
        remark: '不要香菜'
      },
      encryptResult: null,
      requestResult: null,
      envResult: null
    }
  },
  methods: {
    testEncryption() {
      try {
        console.log('🧪 开始加密测试...');
        
        // 加密
        const encrypted = this.$security.encryptData(this.testData);
        
        // 解密
        const decrypted = this.$security.decryptData(encrypted);
        
        this.encryptResult = {
          encrypted: encrypted.substring(0, 50) + '...', // 显示前50个字符
          decrypted
        };
        
        console.log('✅ 加密测试成功');
      } catch (error) {
        console.error('❌ 加密测试失败:', error);
        alert('加密测试失败，请检查控制台');
      }
    },

    testRequest() {
      // 测试请求功能（不需要后端）
      this.requestResult = '请求功能正常（需要启动后端服务进行完整测试）';
      console.log('✅ 请求功能基本正常');
    },

    testEnv() {
      this.envResult = {
        apiUrl: process.env.VUE_APP_API_URL,
        encryptKey: process.env.VUE_APP_ENCRYPT_KEY ? '已设置' : '未设置'
      };
      console.log('✅ 环境变量:', this.envResult);
    }
  }
}
</script>

<style scoped>
.test-security {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
}

.test-btn {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.test-btn:hover {
  background: #45a049;
}

.result {
  margin-top: 15px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 5px;
  font-family: monospace;
}
</style>